<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<!--<script type="application/javascript">
    $(function () {
        $("queryPart").click(function () {
            alert(1);
        });
    });
</script>-->

<form class="layui-form" lay-filter="partForm" style="margin-top: 20px ">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px">部门名称：</label>
        <div class="layui-input-inline" style="margin-left: -20px">
            <input id="pName" type="text" name="username" lay-verify="required" placeholder="请输入部门名称" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label" style="width: 100px;margin-left: -40px">部门描述：</label>
        <div class="layui-input-inline" style="margin-left: -20px">
            <input id="pReark" type="text" name="username" lay-verify="required" placeholder="请输入部门描述"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <button id="queryPart" type="button" class="layui-btn">搜索部门</button>
        <input type="text" hidden="hidden" id="PIS" value="1">
        <button id="showPart" type="button" class="layui-btn">所有部门</button>
        <button id="savePart" type="button" class="layui-btn layui-btn-normal">添加部门</button>
    </div>
</form>


<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table', 'form', 'jquery', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var PIS = $("#PIS").val();
        var layer = layui.layer;

        table.render({
            elem: '#test'
            , id: 'partTable'
            , url: '/api/department/queryInPage'
            /*, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板*/
            //,toolbar:'searchPart'{"pIs": 1}
            , where: {"pIs": PIS}
            , title: '部门表'
            , cols: [[
                {field: 'pid', title: '编号'}
                , {field: 'pname', title: '部门名称'}
                , {field: 'premark', title: '部门描述'}
                , {field: 'pis', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
            , limit: 5
            , limits: [5, 10]
        });

        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            //alert(checkStatus);
        })

        /*//头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });*/

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    axios.get('/api/department/updatePIsByPId',
                        //{"pName":dtSpName, "pRemark": dtSpRemark, "pIs": 1}
                        {
                            params: {"pIs": PIS, "pId": data.pid}
                        }).then(function (response) {
                        if (response.data.ct > 0) {
                            layer.msg("该部门存在客户未交接，无法删除", {time: 3000});
                        } else {
                            layer.msg("删除成功", {time: 3000});
                        }
                    })
                        .catch(function (error) {
                        })
                        .then(function (index) {
                            window.setTimeout(function () {

                            }, 3000)

                            table.reload('partTable', {
                                    page: {curr: 1}
                                }
                            );
                            layer.close(index);
                        });


                    // obj.del();

                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2
                    , skin: "demo-class"
                    , id: 'layerDemo'//防止重复弹出
                    , content: 'partForm.html'
                    , area: ['500px', '300px']
                    , btn: '修改'
                    , btnAlign: 'c' //按钮居中
                    , shade: [0.3, '#2F4056']
                    , resize: false
                    , title: "修改部门"
                    , anim: 4
                    , success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.contents().find('#pName').val(data.pname);
                        body.contents().find('#pRemark').val(data.premark);
                        body.contents().find('#pId').val(data.pid);
                        form.render();
                    }
                    , yes: function (index) {
                        var dt = window['layui-layer-iframe' + index].getValues();
                        var dtSpName = dt.spName;
                        var dtSpRemark = dt.spRemark;
                        var dtSpId = dt.spId;
                        if (dt.spName == "") {
                            layer.msg("请输入部门名称");
                            return -1;
                        }
                        if (dt.spRemark == "") {
                            layer.msg("请输入部门描述");
                            return -1;
                        }
                        axios.get('/api/department/updatePartByPPId',
                            //{"pName":dtSpName, "pRemark": dtSpRemark, "pIs": 1}
                            {
                                params: {"pName": dtSpName, "pRemark": dtSpRemark, "pIs": PIS, "pId": dtSpId}
                            })
                            .then(function (response) {
                                layer.msg("修改成功！");
                            })
                            .catch(function (error) {
                            })
                            .then(function (index) {
                                layer.closeAll();
                                table.reload('partTable', {
                                        page: {curr: 1}
                                    }
                                );
                            });
                    }
                })
            }
        })

        /*console.log(data.pid);
        var pid = data.pid;
        axios.get('/api/department/queryPartByPId', {
            params: {
                pId: pid
            }
        })
            .then(function (response) {
                var rdata = response.data;
                console.log(response.data);
                alert(rdata.part.pname);
            })
            .catch(function (error) {
                console.log(error);
            });
*/

    })
    ;

    /**
     * 根据条件来查询部门
     * */
    $("#queryPart").click(function () {
        var table = table = layui.table;
        var pName = $("#pName").val();
        var pReark = $("#pReark").val();
        var PIS = $("#PIS").val();
        if (!pName && !pReark) {
            layer.msg("请输入查询条件！");
            return;
        }
        table.reload(
            'partTable', {
                //data = {"pName": pName, "pRemark": pReark, "pIs": 1};
                where: {"pName": pName, "pRemark": pReark, "pIs": PIS}
                , page: {
                    curr: 1
                }
            }
        )
        /* var data = {"pName": pName, "pRemark": pReark, "pIs": 1};
         table.reload(

         );*/
        /*axios.get('/api/department/searchPart', {
            params: data
        })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });*/
    });

    /* $("#queryPart").click(function (data) {

     });*/

    /**
     * 显示未删除所有部门
     */
    $("#showPart").click(function () {
        var table = layui.table;
        var PIS = $("#PIS").val();
        table.reload(
            'partTable', {
                where: {"pName": null, "pRemark": null, "pIs": PIS}
                , page: {
                    curr: 1
                }
            }
        )
    });

    /**
     * 添加部门
     */

    $("#savePart").click(function () {
        layer.open({
            type: 2
            , skin: "demo-class"
            , id: 'layerDemo'//防止重复弹出
            , content: 'partForm.html'
            , area: ['500px', '300px']
            , btn: '添加'
            , btnAlign: 'c' //按钮居中
            , shade: [0.3, '#2F4056']
            , resize: false
            , title: "添加部门"
            , yes: function (index) {
                var dt = window['layui-layer-iframe' + index].getValues();
                var dtSpName = dt.spName;
                var dtSpRemark = dt.spRemark;
                if (dt.spName == "") {
                    layer.msg("请输入部门名称");
                    return -1;
                }
                if (dt.spRemark == "") {
                    layer.msg("请输入部门描述");
                    return -1;
                }
                axios.get('/api/department/queryPartByName', {
                    params: {
                        pName: dt.spName
                    }
                })
                    .then(function (response) {
                        if (response.data.tt > 0) {
                            layer.msg("部门已存在，请勿重复添加！");
                            return;
                        } else {
                            var PIS = $("#PIS").val();
                            axios.get('/api/department/parts',
                                //{"pName":dtSpName, "pRemark": dtSpRemark, "pIs": 1}
                                {
                                    params: {"pName": dtSpName, "pRemark": dtSpRemark, "pIs": PIS}
                                })
                                .then(function (response) {
                                    layer.msg("添加成功！");
                                })
                                .catch(function (error) {
                                })
                                .then(function (index) {
                                    layer.closeAll();
                                    var table = layui.table;
                                    table.reload('partTable', {
                                            page: {curr: 1}
                                        }
                                    );
                                });
                        }
                    })
                    .catch(function (error) {
                    })
                    .then(function () {
                    });
            }
        });
    });

</script>
</body>
</html>